<template>
  <div class="projects-container">
    <div class="header">
      <h2>项目经验管理</h2>
      <el-button type="primary" @click="showDialog = true">添加项目经验</el-button>
    </div>

    <el-table :data="projects" style="width: 100%">
      <el-table-column prop="name" label="项目名称" />
      <el-table-column prop="role" label="项目角色" />
      <el-table-column prop="start_date" label="开始时间" />
      <el-table-column prop="end_date" label="结束时间" />
      <el-table-column prop="tech_stack" label="技术栈" />
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      v-model="showDialog"
      :title="dialogTitle"
      width="50%"
    >
      <el-form :model="form" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="项目名称">
              <el-input v-model="form.name" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目角色">
              <el-input v-model="form.role" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="开始时间">
              <el-date-picker v-model="form.start_date" type="date" placeholder="选择日期" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间">
              <el-date-picker v-model="form.end_date" type="date" placeholder="选择日期" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="技术栈">
              <el-input v-model="form.tech_stack" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目描述">
              <el-input v-model="form.description" type="textarea" :rows="3" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="主要职责">
              <el-input v-model="form.responsibilities" type="textarea" :rows="3" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目成果">
              <el-input v-model="form.achievements" type="textarea" :rows="3" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showDialog = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { projectApi } from '../api'

export default {
  name: 'Projects',
  setup() {
    const route = useRoute()
    const employeeId = parseInt(route.params.employeeId)
    const projects = ref([])
    const showDialog = ref(false)
    const dialogTitle = ref('添加项目经验')
    const form = ref({
      name: '',
      role: '',
      start_date: '',
      end_date: '',
      description: '',
      tech_stack: '',
      responsibilities: '',
      achievements: ''
    })
    const currentId = ref(null)

    const loadProjects = async () => {
      try {
        const response = await projectApi.getAll(employeeId)
        projects.value = response.data
      } catch (error) {
        ElMessage.error('加载项目经验列表失败')
      }
    }

    const handleEdit = (row) => {
      currentId.value = row.id
      dialogTitle.value = '编辑项目经验'
      form.value = { ...row }
      showDialog.value = true
    }

    const handleDelete = (row) => {
      ElMessageBox.confirm('确定要删除该项目经验吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await projectApi.delete(employeeId, row.id)
          ElMessage.success('删除成功')
          loadProjects()
        } catch (error) {
          ElMessage.error('删除失败')
        }
      })
    }

    const handleSubmit = async () => {
      try {
        if (currentId.value) {
          await projectApi.update(employeeId, currentId.value, form.value)
          ElMessage.success('更新成功')
        } else {
          await projectApi.create(employeeId, form.value)
          ElMessage.success('添加成功')
        }
        showDialog.value = false
        loadProjects()
      } catch (error) {
        ElMessage.error('操作失败')
      }
    }

    onMounted(() => {
      loadProjects()
    })

    return {
      projects,
      showDialog,
      dialogTitle,
      form,
      handleEdit,
      handleDelete,
      handleSubmit
    }
  }
}
</script>

<style scoped>
.projects-container {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
</style> 